import React from 'react';
import { DownloadOutlined, DeleteOutlined, FileOutlined } from '@ant-design/icons';
// import { previewImg } from '@alife/goc-utils';

import styles from './CustomList.less';

const FileItem = (props) => {
  const {
    className = '',
    style = {},
    name,
  } = props;

  return (
    <div
      className={[styles.fileItem, className].join(' ')}
      style={style}
    >
      <FileOutlined className={styles.icon} /> 
      <div className={styles.fileName}>
        {name || ''}
      </div>
    </div>
  );
}

const CustomList = (props) => {
  const {
    className = '',
    style = {},
    value = [],
    onClick = [],
    mode = 'download', // or 'remove'
  } = props;

  return (
    <div
      className={[styles.root, className].join(' ')}
      style={style}
    >
      {(value || []).map((item, id) => {
        return (
          <div
            className={styles.item}
            onClick={() => onClick(item)}
          >
            <FileItem name={item.name} key={id} />
            { mode === 'download' && <DownloadOutlined /> }
            { mode === 'remove' && <DeleteOutlined /> }
          </div>
        );
      })}
    </div>
  );
};

export default CustomList;
